@charset "utf-8";

@import "common/common";

section{
    .firs_content{
        padding-top:21px;
    }
    h1{
        font-size:30px;
        color: #ff6b08;
    }
    .f_img_wrap{
        width: 300px;
        height: 178px;
        overflow: hidden;
        position: relative;
        img{
            width: 100%;
        }
        span{
            padding-top: 12px;
            color: #fff;
            width: 300px;
            height: 41px;
            background: rgba(0,0,0,.5);
            position: absolute;
            bottom: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .border_line{
        border: 1px solid #EEEEEE;
        border-radius: 3px;
    }
    .sec_content{
        .s_img_wrap{
            margin: 4px;
            width: 232px;
            height: 138px;
            img{
                width: 100%;
            }
        }
        .wrap_big{
            margin-bottom: 35px;
            &:last-of-type{
                border-bottom: 1px dashed #d4d4d4;
            }
        }
        h6{
            font-size: 18px;
            cursor: pointer;
            &:hover{
                color: #ff6900;
            }
        }
        p{
            font-size: 16px;
            line-height: 25px;
        }
        .btn{
            float: right;
            padding: 8px 21px;
            border: 1px solid #ff6900;
            border-radius: 24px;
            color: #ff6900;
            &:hover{
                background: #ff6900;
                color: #fff;
            }
        }
    }
    .pagination {
        >li{
            >a{
                color: #414141;
                &:hover{
                    background-color: #e34637;
                    color: #fff;
                }
            }
        }
        >.active {
            >a {
                z-index: 3;
                color: #fff;
                background-color: #e34637;
                border-color: #dddddd;
                color: #fff;
            }
        }
    }
}
.md30{
    margin-bottom: 30px;
}
.md87{
    margin-bottom: 87px;
}
.pad0{
    padding: 0;
}
.md38{
    padding-bottom: 38px;
}

@media (min-width: 768px) and (max-width: 991px){
    section{
        .f_img_wrap{
            width: 100%;
            img{
                width: 100%;
                height: 100%;
            }
            span{
                padding-top: 8px;
                color: #fff;
                width: 100%;
                height: 20%;
                background: rgba(0,0,0,.5);
                position: absolute;
                bottom: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        .sec_content{
            .s_img_wrap{
                margin: 4px;
                width: 95%;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}

@media (max-width: 768px){
    section{
        .f_img_wrap{
            width: 100%;
            height:100%;
            img{
                width: 100%;
            }
            span{
                &:first-of-type{
                    height: 30%;
                }
                padding-top: 8px;
                color: #fff;
                width: 100%;
                height: 20%;
                background: rgba(0,0,0,.5);
                position: absolute;
                bottom: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        .sec_content{
            .s_img_wrap{
                margin: 0;
                width: 100%;
                height:100%;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
